<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 Entity.
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  var redRectangle = viewer.entities.add({
    name: "Red translucent rectangle",
    rectangle: {
      show: true,

      coordinates: Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),

      // height: 0, // 矩形相对于椭球面的高度
      // heightReference: Cesium.HeightReference.NONE,

      // extrudedHeight: 0, // 矩形的拉伸面相对于椭球面的高度
      // extrudedHeightReference: Cesium.HeightReference.NONE,

      rotation: 0.0, // 矩形从北方向顺时针方向的旋转
      stRotation: 0.0, // 矩形纹理从北方逆时针旋转
      granularity: Cesium.Math.RADIANS_PER_DEGREE, // 指定矩形上各点之间的角度距离
      fill: true,
      material: Cesium.Color.RED.withAlpha(0.5),

      outline: false,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 1.0,

      shadows: Cesium.ShadowMode.DISABLED,
      // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
      //   1.0e3,
      //   2.0e3
      // ),
      // 在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH
      // TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH	将同时对Terrain和3D Tiles进行分类。
      classificationType: Cesium.ClassificationType.BOTH,
      // 指定用于订购地面几何形状的z索引。仅在多边形为常数且未指定高度或拉伸高度的情况下才有效  type:ConstantProperty
      zIndex: 0,
    },
  });

  var greenRectangle = viewer.entities.add({
    name: "Green translucent, rotated, and extruded rectangle at height with outline",
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(-110.0, 30.0, -100.0, 40.0),
      material: Cesium.Color.GREEN.withAlpha(0.5),
      rotation: Cesium.Math.toRadians(45),
      extrudedHeight: 300000.0,
      height: 100000.0,
      outline: true, // height must be set for outline to display
      outlineColor: Cesium.Color.BLACK,
    },
  });

  var rotation = Cesium.Math.toRadians(30);

  function getRotationValue() {
    rotation += 0.005;
    return rotation;
  }
  viewer.entities.add({
    name: "Rotating rectangle with rotating texture coordinate",
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),
      material: "./images/Cesium_Logo_Color.jpg",
      rotation: new Cesium.CallbackProperty(getRotationValue, false),
      stRotation: new Cesium.CallbackProperty(getRotationValue, false),
      classificationType: Cesium.ClassificationType.TERRAIN,
    },
  });

  viewer.zoomTo(viewer.entities);
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
